<template>
    <view style="overflow-y: auto;">
		<view class="condition">
			<view class="conmenus">
				<view class="conleft">流程名称</view>
				<view class="conright">
					<data-picker v-model="form.processKey" :range="options" @change="selectChange"></data-picker>
				</view>
			</view>
			<view class="conmenus">
				<view class="conleft">{{$t('common.field.createTime')}}</view>
				<view class="conright moreright">
					<date-picker :showValue="form.startTime" @change="change($event, 'start')">
						{{ form.startTime || $t('baseCommon.message.pleaseSelect', { title: '' }) }}
					</date-picker>
					<view class="separator">-</view>
					<date-picker :showValue="form.endTime" @change="change($event, 'end')">
						{{ form.endTime || $t('baseCommon.message.pleaseSelect', { title: '' }) }}
					</date-picker>
				</view>
			</view>
		</view>
		
		<view class="button-groups">
			<button type="primary" @click="onQuery">{{$t('baseCommon.buttons.search')}}</button>
			<button type="default" @click="onReset">{{$t('baseCommon.buttons.reset')}}</button>
		</view>
    </view>
</template>
<script>
	import { getFlowDefinition } from '@/api/base/flow.js'
	
    export default {
        data() {
            return {
                options: [],
                form: {
					processKey: '',
					processName: '',
                    startTime: '',
                    endTime: ''
                }
            }
        },
        onLoad() {
			getFlowDefinition().then(res=>{
				res.data.dataResult.forEach(item => {
					this.options.push({
						label: item.name,
						value: item.defKey
					})
				})
			})
		},
        methods: {
			selectChange(e) {
				if(e) {
					this.form.processName = this.options.find(r => r.value == e).label
				}
			},
			dateChange(e, attr) {
				this.form[attr] = e
			},
			onQuery() {
				const eventChannel = this.getOpenerEventChannel()
				eventChannel.emit('dataFilter', this.form)
				uni.navigateBack();
			},
			onReset() {
				this.form.processKey = ""
				this.form.processName = ""
				this.form.startTime = ""
				this.form.endTime = ""
			}
        }
    };
</script>
<style lang="scss">
	@import '@/static/style/common-detail.scss';
	
	page {
		background-color: #f1f1f1;
	}
   
	.moreright {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
   
	.separator {
		margin: 0 4px;
	}
</style>
